<template>
  <div class="lin_login_dialog" v-show="LoginVisible">
    <div class="lin_login_dialog_list">
      <div class="lin_login_dialog_title">
        <div class="lin_login_dialog_close">
        </div>
        <ul>
          <li>
            <a @click='login(0)' :class="{'downline': loginstate,}" style="cursor: pointer;">Log in</a>
          </li>
          <li>
            <a @click='login(1)' :class="{'downline': registerstate,}" style="cursor: pointer;">Register</a>
          </li>
        </ul>
      </div>



      <div v-show="logincontent">
        <div class="lin_login_dialog_input">
          <el-form :model="logininfo" label-width="auto" style="max-width: 450px;">
            <el-form-item>
              <el-input style="height: 50px;" v-model="logininfo.username" required placeholder="Enter your username"/>
            </el-form-item>
            <el-form-item>
              <el-input type="password" style="height: 50px;" v-model="logininfo.password" placeholder="Enter your password" required show-password="true"/>
            </el-form-item>
            <a href="#" style="left: -150px; color: #31a5ff; z-index: 1;">Forget your password</a>

            <div style="text-align: left; top: -20px;">
              <el-checkbox true-value="deal" size="large" style=" top: 46px;"/>
              <p style="margin-left: 20px;">I have read and agree to the <a href="#">User Service Agreement</a>, <a href="#">Privacy<br> Policy</a> and List of <a href="#">Personal Information Shared</a>.</p>
            </div>

            <div style="margin-right: 25px;">
              <el-button color="#ffd200" size="large" style="width: 438px; height: 53px; font-size: 18px; font-weight: bold;" @click="login_button">LOG IN</el-button>
            </div>
          </el-form>

          

          
        </div>
      </div>


      <div v-show="registercontent">
        <div class="lin_login_dialog_input">
          <el-form :model="registerinfo" label-width="auto" style="max-width: 450px;">
            <el-form-item>
              <el-input  style="height: 50px;" v-model="registerinfo.username" required placeholder="Enter your username"/>
            </el-form-item>
            <el-form-item>
              <el-input type="password" style="height: 50px;" v-model="registerinfo.password" required placeholder="Enter your password" show-password="true"/>
            </el-form-item>
            <el-form-item>
              <el-input type="password" style="height: 50px;" v-model="registerinfo.repassword" required placeholder="Re-Enter your password" show-password="true"/>
            </el-form-item>
            <a href="#" style="left: -150px; color: #31a5ff; z-index: 1;">Forget your password</a>

            <div style="text-align: left; top: -30px;">
              <el-checkbox true-value="deal" size="large" style=" top: 46px;"/>
              <p style="margin-left: 20px; font-size: 13px;">I have read and agree to the <a href="#">User Service Agreement</a>, <a href="#">Privacy<br> Policy</a> and List of <a href="#">Personal Information Shared</a>.</p>
            </div>

            <div style="text-align: left; top: -90px;">
              <el-checkbox true-value="deal" size="large" style=" top: 46px;"/>
              <p style="margin-left: 20px; font-size: 13px; margin-top: 15px; color: gray;">Get the latest Insta360 news and deals</p>
              <el-button color="#ffd200" size="large" style="width: 438px; height: 53px; font-size: 18px; font-weight: bold;" @click="register_button">REGISTER</el-button>
              <p style="text-align: center; font-size: 12px;">Already have an account? <a href="#" style="color: #31a5ff; font-weight: bold;">Log in now</a></p>
            </div>

          </el-form>
          
        </div>
      </div>


    </div>
  </div>
</template>


<script lang="ts">
import { Body, Sync } from '@vicons/ionicons5'
import es from 'naive-ui'
import { Login, Register } from '@/api/api';
import {useStore} from '@/states/login'



export const useModelWrapper = (props: any, emit: any, name = 'modelValue') => {
  return computed({
    get: () => props[name],
    set: (value) => emit(`update:${name}`, value),
  })
}

  export default defineComponent({
    props: { //接收父组件传来的数据，并指定类型
      visible: {
        type: Boolean,
        default: false,
      },
      editData: {
        type: Object,
      },

    },

    setup(props, {emit}){
      const LoginVisible = useModelWrapper(props, emit, 'visible')
      const {editData,visible} = toRefs(props)
      const data = reactive({
        loginShow: ref(false),
        loginstate: ref(true),
        registerstate: ref(true),
        logincontent: ref(true),
        registercontent: ref(false),
        deal: ref(true),
        logininfo: {
          username: ref(),
          password: ref()
        },
        registerinfo: {
          username: ref(),
          password: ref(),
          repassword: ref()
        },
        userinfo: ref(),
        loading: ref(),
      })

      // 状态管理器实例化
      const store  = useStore()
      // 实例化路由对象
      const routers = useRouter()


      const login_button = async() => {
        if(data.logininfo.username && data.logininfo.password){
          data.loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })

          Login(
            data.logininfo
            ).then(res => {
            data.userinfo = res._rawValue
            if (data.userinfo.userinfo){
              localStorage.setItem('user-info',JSON.stringify(data.userinfo.userinfo))
              store.restoreFromLocalStorage()
              data.loading.close()
              ElMessage({
                message: data.userinfo.message,
                type: 'success',
                duration: 1000,
                center: true,
              })
              location.reload()         
              return
            }
            routers.push({
              path: '/'
            })
            ElMessage({
              message: '账号密码错误！',
              type: 'error',
              duration: 1000,
              center: true,
            })
          })
          .catch(error => {
            console.log('error:', error);
            data.loading.close()
          })
          return
        }
        ElMessage({
          message: '账号或密码不能为空！',
          type: 'error',
          duration: 1000,
          center: true,
        })
      }

      const register_button = async () => {
        if(data.registerinfo.username && data.registerinfo.password === data.registerinfo.repassword ) {
          data.loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })

          Register(
            data.registerinfo,
          ).then((res?: any) => {
            data.userinfo = res._rawValue
            if (res._rawValue.userinfo){
              data.loading.close()
              ElMessage({
                message: '注册成功',
                type: 'success',
                duration: 1000,
                center: true,
              })
              routers.push({
                path: '/account/login'
              })
              return
            }
          })
          .catch(error => {
            data.loading.close()
            console.log('error:', error);
          })
          return
        }
        ElMessage({
          message: '密码不一致,重新输入！',
          type: 'error',
          duration: 2000,
          center: true,
        })
        return
      }


      const login_close = () => {
        LoginVisible.value = false
      }

      const login = (index: any) => {
        if(index === 0){
          data.loginstate = true
          data.registercontent = false
          data.logincontent = true

        }
        else if (index === 1) {
          data.registerstate = true
          data.logincontent = false
          data.registercontent = true
        }
      }


      return{
        ...toRefs(data),
        login_close,
        login,
        LoginVisible,
        editData,
        visible,
        login_button,
        register_button


        

      }
    }
  })


</script>


<style scoped>
* {
  color: rgb(0, 0, 0)
}
.lin_login_dialog {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}

.lin_login_dialog_close {
  display: flex;
  justify-content: right;
}

.close {
  position: fixed;
  z-index: 99;
  top: 10%;
  cursor: pointer;
  margin-right: 20px;
  margin-top: 10px;
}

.lin_login_dialog_list {
  width: 500px;
  height: 650px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
}

.lin_login_dialog_title ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.lin_login_dialog_title ul li {
  margin-top: 30px;
  font-weight: bold;
  font-size: 18px;
}

.lin_login_dialog_input {
  margin-left: 26px;
  margin-top: 50px;
}

.downline {
  display: inline;
  text-decoration: none;
  background: linear-gradient(to right, currentColor 0%, currentColor 100%);
  background-size: 0 2px;
  background-position: 0 95%;
  transition: background-size 0.2s linear 0s;
  background-repeat: no-repeat;
  padding-bottom: 10px;
}

.downline:hover {
  background-size: 100% 2px;
  outline: 0;
  color: rgb(0, 0, 0);
}

.loginShow {
  display: block;
}

.login {
  display: block;
}


.register {
  display: block;
}

</style>